<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";

defineOptions({
  name: "BaseEditor"
});

const mode = "default";
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref(
  "<p>各区、县（市）民政局，钱塘区、西湖风景名胜区社发局，各有关社会组织：</p><p>为培育发展社会组织，充分引导社会组织在助力经济发展、推进乡村振兴、促进稳岗就业、提供“一老一小”服务、参与第三次分配等工作中发挥积极作用，根据《民政部关于民政部门利用福利彩票公益金向社会力量购买服务的指导意见》《浙江省关于促进社会组织高质量发展 助力共同富裕示范区建设的意见》《杭州市关于促进公益性社会组织发展的实施意见》和《杭州市公益创投项目管理办法》等文件要求，现就做好杭州青青草公益服务中心 申报工作通知如下：</p>"
);

// 模拟 ajax 异步获取内容
// onMounted(() => {
//   setTimeout(() => {
//     valueHtml.value = ``;
//   }, 1500);
// });

const toolbarConfig: any = { excludeKeys: "fullScreen" };
const editorConfig = { placeholder: "请输入内容..." };

const handleCreated = editor => {
  // 记录 editor 实例，重要！
  editorRef.value = editor;
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
</script>

<template>
  <div class="wangeditor">
    <Toolbar
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
      style="border-bottom: 1px solid #ccc"
    />
    <Editor
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      style="height: 200px; overflow-y: hidden"
      @onCreated="handleCreated"
    />
  </div>
</template>
